<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<table>
    <tr>
        <th>ID</th>
        <th>书名</th>
        <th>出版社</th>
        <th>价格</th>
        <th>零售价</th>
        <th>修改</th>
        <th>删除</th>
    </tr>
    {% for abook in books %}
        <tr>
            <td>{{ abook.id }}</td>
            <td>{{ abook.title }}</td>
            <td>{{ abook.pub_house }}</td>
            <td>{{ abook.price }}</td>
            <td>{{ abook.market_price }}</td>
            <td><a href="/book/update/{{ abook.id }}">修改</a></td>
            <td><a href="/book/delete/{{ abook.id }}">删除</a></td>
        </tr>
    {% endfor %}




</table>
  {# 分页功能   #}
    <div class="paginator">
    <div class="page_pre">
    {% if books.has_previous %}
        <a href="{% url "list_book" %}?page={{ books.previous_page_number }}">上一页</a>
    {% else %}
        上一页
    {% endif %}
    </div>

    <div class="page_range">
    {% for p in paginator.page_range %}
        {% if p == books.number %}
            {{ p }}
        {% else %}
            <a href="{% url "list_book" %}?page={{ p }}">{{ p }}</a>
        {% endif %}

    {% endfor %}
    </div>

    <div class="page_next">
    {% if books.has_next %}
        <a href="{% url "list_book" %}?page={{ books.next_page_number }}">下一页</a>
    {% else %}
        下一页
    {% endif %}
    </div>
    <div class="page_num">
    总页数：{{ paginator.num_pages }}
    </div>
    </div>
</body>
<style>
    .paginator{
        width: 400px;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }
    .page_range a{
        display: inline-block;
        width: 40px;
        align-items: center;
        text-align: center;


    }
    .page_num{
        margin-left: 30px;
    }
</style>
</html>